<template>
    <view class="page">


        <view class="page-head">
            <statusBar></statusBar>
            <view style="display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;">
                <image src="/static/images/logo.png" style="width: 138rpx;height: 40rpx;margin-left: 20rpx;">
                </image>
                <view></view>
                <view></view>
            </view>

        </view>
        <view class="head-polyfill" :style="{ height: statusBarHeight + 38 + 'px' }"></view>
        <view class="page-data" v-if="deviceInfo.length > 0">
            <view class="device-status">
                <image class="device-bg" :src="imgBaseUrlV2 + 'shebei_top_bg.png'" mode=""></image>
                <view class="device">
                    <view class="device-box">
                        <view class="device-title">
                            <image class="title-img" :src="imgBaseUrlV2+'list.png'" mode=""></image>
                            {{conpanyInfo.title}}
                        </view>

                        <view class="bd">
                            <view class="host">

                            </view>
                            <view class="model">

                            </view>
                        </view>
                    </view>
                </view>
                <view class="device-num">
                    <view class="list-tab">
                        <view class="tabs" v-for=" tab in tabs" @click="onClickTab(tab.id)" :key="tab.id">
                            <view class="dot" v-if="tab.id == 4 && tab.num > 0 "></view>
                            <view class="num">{{tab.num}}</view>
                            <view>{{tab.name}}</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="page-filter">
                <view class="bd">设备列表</view>
            </view>

            <view class="equipment-list">
                <view class="item" v-for="equipment in deviceInfo" :key="equipment.id" @click="onClickItem(equipment)">
                    <Equipment :equipment="equipment"></Equipment>
                </view>
            </view>

            <!-- 加载中提示 -->
            <view class="loading" v-if="loading">
                <text>加载中...</text>
            </view>

            <!-- 没有更多数据提示 -->
            <view class="no-more" v-if="!hasMore && !loading && deviceInfo.length > 0">
                <text>没有更多数据了</text>
            </view>
        </view>
        <view class="no-data-box" v-if="!deviceInfo.length">
            <no-data status="no_shebei" title="暂无相关设备信息"></no-data>
        </view>

        <Message ref="message"></Message>
    </view>
</template>

<script>
    import viewModule from "@/common/mixins/view-module";
    import {
        getUser
    } from "@/common/api/user.js";

    import {
        getEquipmentBaseInfo,
        getConpanyDeviceList,
        getConpanyInfo,
    } from "@/common/api/equipment.js";
    import Equipment from "@/components/public/item/equipment";


    import {
        getEquipmentTypeOptions
    } from "@/common/api/equipment-type.js";
    import {
        imgBaseUrl,
        imgBaseUrlV2,
    } from "@/common/config";
    import Router from "@/common/js/router";
    import statusBar from "@/components/public/status-bar/status-bar";

    const system = uni.getSystemInfoSync();
    let statusBarHeight = system.statusBarHeight;
    // #ifdef MP-WEIXIN
    let custom = uni.getMenuButtonBoundingClientRect();
    statusBarHeight = custom.top;
    // #endif
    import {
        mapState,
    } from "vuex";
    export default {
        components: {
            Equipment,
            statusBar
        },
        data() {
            return {
                statusBarHeight,
                imgBaseUrlV2,
                tabs: [{
                        icon: imgBaseUrl + "shebei_blue.png",
                        name: "设备总数",
                        key: "deviceTotal",
                        id: 1,
                    },
                    {
                        icon: imgBaseUrl + "shebei_blue.png",
                        name: "设备在线",
                        key: "deviceOnlineCount",
                        id: 2,
                    },
                    {
                        icon: imgBaseUrl + "shebei_green.png",
                        name: "设备离线",
                        key: "deviceOfflineCount",
                        id: 3,
                    },
                    {
                        icon: imgBaseUrl + "shebei_red.png",
                        name: "设备报警",
                        key: "deviceWarningCount",
                        id: 4,
                    }
                ],
                deviceInfo: [], //设备列表
                conpanyInfo: [], //公司信息
                // 分页参数
                page: 1, // 当前页码
                pageSize: 200, // 每页条数
                loading: false, // 是否正在加载中
                hasMore: true // 是否还有更多数据
            };
        },
        mounted() {
            this.initData();
        },
        computed: {
            ...mapState("User", ["userInfo", "token", "permissions"]),
        },
        // 监听页面滚动到底部
        onReachBottom() {

            // 如果正在加载中，或者没有更多数据了，则不执行加载
            if (this.loading || !this.hasMore) return;
            // 加载下一页数据
            this.page++;
            this.orderList();
        },
        methods: {

            initData() {
                this.getEquipmentBaseInfo();
                this.getConpanyDeviceList(); // 初始加载第一页
                this.getConpanyInfo();
                uni.$emit("hideLoading");
            },

            getEquipmentBaseInfo() {
                getEquipmentBaseInfo().then((res) => {
                    let data = res.data || {};
                    this.tabs.map(item => {
                        if (item.id == 1) {
                            item.num = data.deviceTotal
                        }
                        if (item.id == 2) {
                            item.num = data.deviceOnlineCount
                        }
                        if (item.id == 3) {
                            item.num = data.deviceOfflineCount
                        }
                        if (item.id == 4) {
                            item.num = data.deviceWarningCount
                        }
                    })
                }).catch((err) => {});
            },
            getConpanyDeviceList() {
                // 标记为加载 中
                this.loading = true;
                console.log(this.page, "123123a")
                // 传递分页参数到接口
                getConpanyDeviceList({
                    page: this.page,
                    limit: this.pageSize
                }).then((res) => {
                    const newData = res.data.data;
                    this.loading = false;
                    // 如果是第一页，直接赋值
                    if (this.page === 1) {
                        this.deviceInfo = newData;
                    } else {
                        // 如果是后续页，追加数据
                        this.deviceInfo = [...this.deviceInfo, ...newData];
                    }

                    // 判断是否还有更多数据
                    // 如果返回的数据少于每页条数，说明没有更多数据了
                    if (newData.length < this.pageSize) {
                        this.hasMore = false;
                    }
                }).catch((err) => {
                    this.loading = false;
                    console.error('失败', err);
                    // 加载失败时，页码回退
                    if (this.page > 1) {
                        this.page--;
                    }
                });

            },
            getConpanyInfo() {
                getConpanyInfo().then((res) => {
                    let data = res.data || {};
                    this.conpanyInfo = data;
                }).catch((err) => {});
            },

            onClickTab(type) {
                switch (type) {
                    case 1: // 设备数量
                        break;
                    case 2: // 设备在线
                        break;
                    case 3: // 设备离线
                        break;
                    case 4: // 设备报警
                        break;
                }
                uni.navigateTo({
                    url: "/pages/equipment-list/equipment-list?type=" + type,
                });
            },
            onClickItem(item) {
                if (!this.$hasPermission("Device/basic")) {
                    return this.message.error("无权限查看详情!");
                }
                Router.push({
                    path: "/pageA/equipment-detail/index",
                    query: {
                        device_id: item.id,
                    },
                });
            },
        },

    };
</script>

<style lang="stylus" scoped>
    @import '~@/common/stylus/variable';
    @import '~@/common/stylus/mixins';

    /* 加载状态样式 */
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0;
        color: #fff;
        font-size: 24rpx;

        .loading-icon {
            width: 30rpx;
            height: 30rpx;
            border: 2rpx solid #fff;
            border-bottom-color: transparent;
            border-radius: 50%;
            animation: loading 1s linear infinite;
            margin-right: 15rpx;
        }
    }

    .no-more {
        text-align: center;
        padding: 30rpx 0;
        color: #ccc;
        font-size: 24rpx;
    }



    .page {
        min-height: 100vh;
        padding-bottom: 150rpx;
        box-sizing: border-box;
        background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
    }

    .no-data-info {
        margin-top: 35%;
    }

    .no-data-box {
        padding: 30rpx 0;
    }

    .page-head {
        position: fixed;
        width: 100%;
        line-height: 64rpx;
        left: 0;
        top: 0;
        z-index: 998;
        text-align: center;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        transition: all 0.3s;
        color: #fff;
        background: #252e43;
        box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.12);
        padding-bottom: 12rpx;
    }

    /* #ifdef H5 */
    .page-head {
        padding-top: 12rpx;
    }

    /* #endif */
    .head-polyfill {
        /* #ifdef H5 */
        margin-bottom: 12rpx;
        /* #endif */
    }

    .equipment-list {
        // background-color: #f5f5f5; // 解决selector收回样式问题
        padding: 20rpx;

        .item {
            padding: 26rpx 16rpx;
            background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
            border-radius: 10rpx;
            flex-direction: row;
            margin-bottom: 30rpx;
            overflow: hidden;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .device-status {
        //display: flex;
        padding: 24rpx;
        position: relative;

        .device-bg {
            width 100%;
            position: absolute;
            bottom: -20rpx;
            left: 0;
            z-index: -1;
        }

        .check-box {
            width: 100%;
            color: #fff;
            display: flex;
            position: relative;
            z-index: 3;

            >.ft {

                display: flex;
                flex: 0 0 auto;
                margin-right: 15rpx;

                .icon {
                    display: block;
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 10rpx;
                    transition: all 0.3s;

                    &.active {
                        transform: rotate(180deg);
                    }
                }

                >.text {
                    display: flex;
                    align-items: center;
                }

                .filter {
                    position: absolute;
                    top: 120%;
                    z-index: 3;
                    padding-top: 12rpx;

                    .options {
                        border-radius: 10rpx;
                        background: rgba(0, 0, 0, 0.7);
                        padding: 16rpx;

                        .option {
                            height: 50rpx;
                            line-height: 50rpx;
                            text-align: left;
                            color: #fff;
                            font-size: 28rpx;
                        }
                    }

                    .after {
                        position: absolute;
                        content: '';
                        width: 0;
                        height: 0;
                        top: 0;
                        right: 0;
                        left: 0;
                        margin: auto;
                        border-left: 10rpx solid transparent;
                        border-right: 10rpx solid transparent;
                        border-bottom: 12rpx solid rgba(0, 0, 0, 0.7);
                    }
                }
            }
        }

        .device {
            widht: 100%;

            .device-box {
                color: color-white;

                .device-title {
                    display: inline-block;
                    margin: 15rpx 0;
                    position: relative;
                    padding: 10rpx 57rpx 10rpx 53rpx;

                    .title-img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                    }
                }

                .bd {
                    display: flex;
                    height: 170rpx;

                    .host {
                        width: 60%;
                        height: 350rpx;
                        overflow-y: auto;
                        margin-top: 12%;

                        .host-list {
                            width: 100%;
                            display: flex;
                            margin-bottom: 36rpx;

                            .list {
                                width: 155rpx;
                                height: 155rpx;
                                border-radius: 50%;
                                background: linear-gradient(270deg, #112849 0%, #153d6e 100%);
                                display: flex;
                                align-items: center;
                                position: relative;

                                .host-img {
                                    max-width: 100%;
                                    height: 58% !important;
                                    display: block;
                                    position: relative;
                                    z-index: 3;
                                }

                                .rotate {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    z-index: 1;
                                    display: block;
                                    width: 155rpx;
                                    height: 155rpx !important;
                                    border-radius: 50%;
                                    animation: rotate 2s infinite linear forwards;
                                }
                            }

                            .info {
                                display: flex;
                                flex-wrap: wrap;
                                margin-left: 15rpx;

                                .icon {
                                    width: 52rpx;
                                    height 52rpx;
                                    margin-left: 15rpx;
                                }
                            }
                        }
                    }

                    .model {
                        width: 50%;

                        .device-img {
                            width: 100%;
                            height: 68%;
                            margin-top: 28%
                        }
                    }
                }
            }
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(359deg);
        }
    }

    .page-filter {
        display: flex;
        padding: 16rpx 24rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        color: color-white;
        margin-top: 10%;

        >.bd {
            flex: 1;
        }

        >.ft {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;

            >.icon {
                width: 32rpx;
                height: 32rpx;

                >.image {
                    display: block;
                    width: 32rpx;
                    height: 32rpx;
                }

                &.active {
                    >.line:last-child {
                        width: 16rpx;
                    }

                    >.line:nth-child(2) {
                        // width: 24rpx;
                    }
                }

                >.line {
                    width: 32rpx;
                    height: 4rpx;
                    border-radius: 4rpx;
                    background: #999;
                    margin-bottom: 8rpx;
                    transition: all 0.3s;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    .device-num {
        width: 100%;
        // background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
        position: absolute;
        bottom: -25%;
        left: 0;
        padding: 20rpx;
        z-index: 99;

        .list-tab {
            padding: 26rpx 16rpx;
            background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
            border-radius: 10rpx;
            flex-direction: row;
            margin-bottom: 20rpx;
            overflow: hidden;
            flex: 1;
            display: flex;
            justify-content: space-around;

            .tabs {
                color: #fff;
                text-align: center;
                line-height: 70rpx;
                position: relative;
                font-size 30rpx;

                .dot {
                    width: 15rpx;
                    height: 15rpx;
                    position: absolute;
                    top: 0;
                    right: 12rpx;
                    background-color: #DC2A2A;
                    border-radius: 50%;
                }

                .num {
                    font-size: 50rpx;
                }
            }
        }
    }

    .equipment-list-other {
        display: flex;
        padding: 0 24rpx;
        flex-wrap: wrap;

        >.item {
            flex: 0 0 162rpx;
            height: 100px;
            background: #fff;
            padding: 14rpx;
            margin-right: 16rpx;
            margin-bottom: 16rpx;
            border-radius: 10rpx;

            &:nth-child(4n) {
                margin-right: 0;
            }
        }
    }

    .tips {
        text-align: center;
        padding: 30rpx 0;
        color: #999;
        font-size: 28rpx;
    }
</style>